<template>
  <el-dialog
    title="调整下级排序"
    :fullscreen="dialogFullscree"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
    class="showDialogClass"
    :before-close="handleClose"
  >
      <el-row style="padding: 8px">
      <el-col :span="24">
        <el-button
            style="float:right;"
            type="primary"
            size="medium"
            @click="handleClickTop"
        >批量调整上级</el-button>
      </el-col>
      </el-row>
      <div style="height: auto;overflow-y:scroll;">
            <vxe-table
                ref="xTable"
                resizable
                show-overflow
                :data="tableData"
                highlight-current-row
                row-id="id"
                :edit-config="{ trigger: 'click', mode: 'row', icon: ' ' }"
                @checkbox-change="handleSelectChang"
                @checkbox-all="handleAllSelectChang"
            >
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column type="seq" width="60"></vxe-column>
                <vxe-column field="name" title="目录名称"> </vxe-column>
                <vxe-column field="content3" title="序号"> </vxe-column>
            </vxe-table>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveUpdateSort">保 存</el-button>
      </span>
      <el-drawer
        title="调整上级"
        :visible.sync="drawer"
        :direction="direction"
        ref="tclb"
        width="20%"
        :before-close="handleCloseDrawer"
        :append-to-body="true"
      >
        <div  class="tree mt10">
          <el-tree
            :data="cascaderData"
            :props="defaultProps"
            v-model="cascadrValue"
            @node-click="handleNodeClick"
          />
        </div>
        <div class="demo-drawer__footer">
            <el-button @click="drawer = false">取 消</el-button>
            <el-button type="primary" @click="updateBatchParent">确定</el-button>
        </div>
      </el-drawer>
  </el-dialog>
</template>

<script>
 import { updateSort,updateBatchParent } from "@/api/knowledge/diretory";
 import Sortable from "sortablejs";
 import store from "@/store";
export default {
   name:"updateSort",
   props: {
      subTreeData: { // 接收父组件传递的数据
        type: Array,
        default: () => [],
      },
      cascaderList: { // 接收父组件传递的数据
        type: Array,
        default: () => [],
      },
    },
   data(){
    return {
        dialogFullscree: false,
        dialogVisible: false,
        tableData: [],
        cascaderData:[],
        dialogVisibleTop:false,
        dictionary:[],//单个
        multipleSelection:[],//多个
        cascadrValue:[],
        fileBussinessTypeCode:"111",
        nodeId:"",
        treeIndex:"",
        dataId:"",
        cascaderIdx:0,
        drawer:false,
        direction: `ltr`,
        defaultProps: {
          children: 'children',
          label: 'title'
        }
    }
   },
   beforeDestroy() {
        if (this.sortable) {
          this.sortable.destroy();
        }
   },
   watch: {
      cascadrValue() {
        if (this.$refs.cascader) {
            this.$refs.cascader.dropDownVisible = false
        }
      },
      options(newVal){
        this.cascaderIdx++;
      }
    },
   methods:{
    init(data){
        this.tableData = this.subTreeData
        this.cascaderData = this.cascaderList;
        console.log(this.cascaderData,"qwewr")
        this.dialogVisible = true;
        this.rowDrop();
    },
    handleClickTop(){
       this.drawer = true;
    },
    //单个调整
    handleSelectChang({ checked }){
        this.dictionary = []
        this.multipleSelection = []
        const records = this.$refs.xTable.getCheckboxRecords();
        this.dictionary = records;
    },
    // 批量调整
    handleAllSelectChang({ checked, records }){
        this.dictionary = []
        this.multipleSelection = []
        this.multipleSelection = records;
    },
    handleNodeClick(data,b,c){
        this.nodeId = data.id;
    },
    updateBatchParent(){
        this.drawer = false;
        this.dialogVisible = false;
        let dataList = [...this.dictionary, ...this.multipleSelection];
        const idList = {};
        dataList.forEach((item) => {
            if (!idList.hasOwnProperty(item.id)) { // 如果idList中不存在当前id，则添加进去
                idList[item.id] = this.nodeId;
            }
        });

        const params = {
            data:{
                "fileBussinessTypeCode": this.fileBussinessTypeCode,
                 idList: idList,
            },
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
        };

        updateBatchParent(params).then((data)=>{
            if(data.result === true){
                console.log(data,"data");
                this.$message({
                    type: 'success',
                    message:"保存成功"
                });
                this.$emit(`refresh`);
            }
        });
    },
    saveUpdateSort(){//保存更改之后的排列顺序
        this.dialogVisible = false;
        const params = {
            data:this.tableData,
            userId: store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
        }
        updateSort(params).then((data)=>{
            if(data.result === true){
                this.$message({
                    type: 'success',
                    message:"保存成功"
                })
                this.$emit(`refresh`);
            }
        })
    },
    rowDrop() {// 行拖动
        this.$nextTick(() => {
            let xTable = this.$refs.xTable;
            this.$nextTick(() => {
            this.sortable = Sortable.create(
                xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
                {
                handle: ".vxe-body--row",
                animation: 150,
                onEnd: ({ newIndex, oldIndex }) => {
                    this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
                    var newArray = this.tableData.slice(0);
                    this.tableData = [];
                    this.$nextTick(function () {
                    this.tableData = newArray;
                    });
                },
                }
            );
            });
        });
    },
    handleClose(){
        this.dialogVisible = false;
    },
    handleCloseDrawer(){
        this.drawer = false;
    }
   }
}
</script>

<style scoped>
>>>.el-dialog__wrapper{
    overflow: hidden;
}
.el-tree {
  min-width: 100%;
  height: calc(100% - 150px);
  display: inline-block;
}
.tree {
  overflow:auto;
  height: 680px;
  min-width: 100%;
}
.demo-drawer__footer .el-button{
    width: 270px;
    height: 35px;
    margin-left: 5px;
    margin-bottom: 10px;
}
</style>
